<template>
	<div id="home">
		
		
		<el-container>
		      <el-header height="80px" style="padding: 0;margin: 0;">
				  <div class="top">
					  <div class="top_title">
						  云边超市仓库采购系统
					  </div>
					  <div class="top_head">
						<div class="top_user_img">
							<el-avatar :size="50" :src="userData.head_url"/>
						</div>
						<div class="top_username">
							{{userData.name}}
						</div>
						<el-tooltip
							effect="light "
							content="退出"
							placement="bottom-start"
						  >
							<el-icon class="iconfont icon-exit top_exit" @click="logout"></el-icon>
						</el-tooltip>	
					  </div>
				  </div>	
			  </el-header>
		      <el-container>
		        <el-aside width="250px">
					<div class="left">
						<el-menu
							default-active="/user_list"
							unique-opened="true"
							router="true"
							class="el-menu-vertical-demo"
							text-color="#666"
							active-text-color="#409EFF"
							background-color="#F2F6FC"
							style="height: 628px;font-weight: bold;"
						  >
							<el-sub-menu index="1" default-opened="true">
							  <template #title>
								<el-icon class="iconfont icon-yuangongguanli"></el-icon>
								<span>人员管理</span>
							  </template>
							  <el-menu-item-group>
								<el-menu-item index="/user_list">人员列表</el-menu-item>
							  </el-menu-item-group>
							</el-sub-menu>
							
							<el-sub-menu index="2" v-if="userData.role==4 || userData.role==6 || userData.role==5|| userData.role==9">
							  <template #title>
							    <el-icon class="iconfont icon-dingdan"></el-icon>
							    <span>订单管理</span>
							  </template>
							  <el-menu-item-group>
								<el-menu-item index="/apply_list">申请列表</el-menu-item>
							    <el-menu-item index="/order_list" v-if="userData.role==6 || userData.role==4 || userData.role==9">订单列表</el-menu-item>
								<el-menu-item index="/check_order" v-if="userData.role==6 || userData.role==9">订单审批</el-menu-item>
							  </el-menu-item-group>
							</el-sub-menu>
						        
							<el-sub-menu index="3" v-if="userData.role==1 || userData.role==4 || userData.role==6 || userData.role==9">
							  <template #title>
							    <el-icon class="iconfont icon-gongyingshang"></el-icon>
							    <span>供应商管理</span>
							  </template>
							  <el-menu-item-group>
							    <el-menu-item index="/register_supplier">供应商资料</el-menu-item>
								<el-menu-item index="/supplier_list" v-if="userData.role==4 || userData.role==6 || userData.role==9">供应商列表</el-menu-item>
							  </el-menu-item-group>
							</el-sub-menu>	
							
							<el-sub-menu index="4" v-if="userData.role==3 || userData.role==9 ">
							  <template #title>
							    <el-icon class="iconfont icon-caiwuguanli"></el-icon>
							    <span>财务管理</span>
							  </template>
							  <el-menu-item-group>
							    <el-menu-item index="/order_pay">订单支付</el-menu-item>
								<el-menu-item index="/finance_list">财务支出详情</el-menu-item>
							  </el-menu-item-group>
							</el-sub-menu>	
							
							<el-sub-menu index="5" v-if="userData.role==2 || userData.role==3 || userData.role==4 || userData.role==6 || userData.role==9">
							  <template #title>
							    <el-icon class="iconfont icon-cangkuguanli-"></el-icon>
							    <span>仓库管理</span>
							  </template>
							  <el-menu-item-group>
							    <el-menu-item index="/warehouse_list">库存列表</el-menu-item>
								<el-menu-item index="/order_state">订单到货状态</el-menu-item>
							  </el-menu-item-group>
							</el-sub-menu>	
					  </el-menu>
					</div>	
				</el-aside>
		        <el-main>
					<div class="main">
						<router-view></router-view>
					</div>
				</el-main>
		      </el-container>
		    </el-container>
		
		
		
	</div>
</template>

<script>
var default_head_url="http://127.0.0.1:8080";
export default {
    data() {
      return {
		  userData:{}
      };
    },
    methods: {
		/**
		 * 退出登录
		 */
      logout:function(){
		  sessionStorage.removeItem('user');
		  this.$router.push('/')
	  }
    },
	/**
	 * 用于加载数据
	 */
	created() {
	    const userParam = sessionStorage.getItem('user')
	    const user = JSON.parse(userParam);
	    this.userData=user
		if(this.userData.head_url==null){
			this.userData.head_url=default_head_url+"/images/headImg/3228548975.jpg";
		}else{
			this.userData.head_url=default_head_url+this.userData.head_url
		}
	  },
  }
</script>

<style>
	#home{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.left{
		width: 250px;
		color: black;
		padding: 0;
		margin: 0;
	}
	.top{
		width: 100%;
		height: 80px;
		background-color: #a0cfff;
		position: relative;
		line-height: 80px;
	}
	.top_title{
		font-size: 26px;
		font-weight: bold;
		color: #666;
		position: absolute;
		left: 40px;
		user-select: none;
	}
	.top_head{
		position: absolute;
		right: 60px;
		height: 80px;
		line-height: 80px;
	}
	.top_user_img{
		display: inline-block;
		width: 80px;
		position: absolute;
		top: 15px;
		right: 90px
	}
	.top_username{
		display: inline-block;
		height: 80px;
		line-height: 80px;
		font-weight: bold;
		width: 50px;
		color: #333;
		position: absolute;
		right: 55px;
	}
	.top_exit{
		font-weight: bold;
		font-size: 36px
	}
	.main{
		width: 100%;
		height: 100%;
		background-color: #FAFAFA;
	}
</style>
